<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<view v-if="isLogin" class="body">	
			
			<view class="step-bar">
				<view class="fix-wrap">
					<view class="item active">
						<view class="icon iconfont">&#xe8cc;</view>
						<text class="text">基本信息</text>
					</view>
					<view class="item active">
						<view class="icon iconfont f-s38">&#xe621;</view>
						<text class="text">合同</text>
					</view>
					<view class="item active">
						<view class="icon iconfont">&#xec35;</view>
						<text class="text">阶段任务</text>
					</view>
					<view class="item active">
						<view class="icon iconfont">&#xe659;</view>
						<text class="text">回款计划</text>
					</view>
					<view class="item active">
						<view class="icon iconfont">&#xeb67;</view>
						<text class="text">发送审批</text>
					</view>
				</view>	
			</view>
			
			<template v-if="loadingState.default">
				<c-loading :loadingState="loadingState"></c-loading>
			</template>
			
			<template v-else>
				<view class="hd-title">
					<view class="title">审批消息</view> 
				</view>
				<view class="project-form-wrap m-b2">				
					<view class="form-wrap m-b2">
						<view class="form-item">
							<view class="label">消息类型：</view>
							<picker class="form-picker" mode="selector" disabled :range="msgTypeList" range-key="name" @change="changeMsgType">
								<view class="picker">
									<view class="select-data t-r">{{params.msg_type_name}}</view>
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>						
								</view>	
							</picker> 						
						</view> 
						<view class="form-item">
							<view class="label">标题：</view>
							<view class="form-input">
								<view class="content">
									<textarea class="textarea" v-model="params.title" auto-height placeholder="输入标题"></textarea> 
									<!-- <input type="text" class="inp" v-model="params.title" placeholder="输入标题" /> -->
								</view>				
							</view>			
						</view>     
						<view class="form-textarea-item">
							<view class="label a-t">消息内容</view>
							<view class="form-textarea">
								<textarea class="inp-textarea" v-model="params.content" placeholder="消息内容" maxlength="-1"></textarea>
							</view>
						</view> 
					</view> 
				</view>
				
				<view class="flow-wrap m-b2">
					<view class="hd-title m-b4">
						<view class="title">流程</view> 
					</view>
					<view class="item">
						<view class="left-line">
							<view class="circle"></view>
							<view class="line"></view>
						</view>
						<view class="right">
							<view class="label">
								<view class="">审批人</view>
							</view>
							<view class="mail-user">
								<view class="user-item" v-if="params.approver.username">
									<view class="avator">
										{{params.approver.username|substringUsername(params.approver.username)}} 
										<view class="del-btn iconfont" @click="deluser(1)">&#xe724;</view>
									</view> 
								</view>
								<navigator v-else :url="'/package_msg/mailUser/mailUser?scene=5&type=1&select_data='+params.approver.id+'&department_id=29'" hover-class="none" class="add-user-btn">
									<image src="@/static/images/add.png" mode="widthFix"></image>
								</navigator>
							</view>
						</view>
					</view>
					<view class="item">
						<view class="left-line">
							<view class="circle"></view> 
						</view>
						<view class="right">
							<view class="label">
								<view class="">抄送人</view>
							</view>
							<view class="mail-user"> 
								<view v-if="params.carbon_copys.length>0" class="user-item m-r2" v-for="(item,index) in params.carbon_copys" :key="index">
									<view class="avator">
										{{item.username|substringUsername(item.username)}} 
										<view class="del-btn iconfont" @click="deluser(2,index)">&#xe724;</view>
									</view> 
								</view>
								<navigator :url="'/package_msg/mailUser/mailUser?scene=6&type=2&select_data='+params.carbon_copy_id.join(',')" hover-class="none" class="add-user-btn">
									<image src="@/static/images/add.png" mode="widthFix"></image>
								</navigator>
							</view>
						</view>
					</view>
				</view>
			</template>  
		</view> 
		<view v-if="!loadingState.default" class="footer">
			<view class="fix-wrap created-btn-wrap">
				<view class="btn submit-btn" @click="sendMsg">发送审批</view> 
			</view>
		</view> 
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				isIphoneX:getApp().globalData.isIphoneX,
				isLogin:false,
				userInfo:uni.getStorageSync('userInfo'),
				id:'',
				scene:'',    // 场景  1  跳回详情
				params:{ 
					msg_type:'',
					msg_type_name:'',
					msg_type:'',
					content:'',
					cc_content:'',
					approver:{ },
					carbon_copys:[],
					carbon_copy_id:[],
					pro_id:'', 
					title:'', 
					cc_title:'',
					status:''
				}, 
				project:{},
				msgTypeList:[],
				isStop:true,
				loadingState:{
					default:true
				}
			}
		},
		async onLoad(params) { 
			this.isLogin=await this.$loginState('check'); 
			// 项目类型
			this.id=params.id;
			if(params.scene){
				this.scene=params.scene;
			}	
			this.params.status=params.status;
			this.msgTypeList=this.$mock_data.msgTypeList;   // 消息类型
			this.params.msg_type=this.msgTypeList[0].id;
			this.params.msg_type_name=this.msgTypeList[0].name;
			if(this.isLogin){
				this.getProjectDetail();
			}
		},
		filters:{
			substringUsername(val){ 
				if(val) return val.substring(val.length-2);			    
			},
		},
		methods: {
			
			// 添加任务阶段
			createdPlan() {
				this.plan.num += 1;
				this.$set(this.plan.list, this.plan.num, {
					pro_id:this.id,
					amount:'',
					point:'',
					btime:'',
					desc:'',
					isError:true
				})
			},
			
			// 删除
			delCreatedPlan(idx) {
				this.plan.num -= 1;
				this.plan.list.splice(idx, 1);
			},
			
			// 切换消息类型
			changeMsgType(e){ 
				this.params.msg_type=this.msgTypeList[e.target.value].id;
				this.params.msg_type_name=this.msgTypeList[e.target.value].name; 
			}, 
			
			async sendMsg(){   
				if(!this.params.approver.id){
					this.$showToast({ 
						title:'请选择审核人',
						duration:1000,
					})
					return
				} 
				
				if(this.isStop){					 
					this.isStop=false;
					let res=await this.$api.user_api.addApprover({ 						
						approver:this.params.approver.id,
						carbon_copy:this.params.carbon_copy_id.join('_'),
						pro_id:this.id,  
						title:this.params.title,
						content:this.params.content, 
						cc_title:this.params.cc_title,
						cc_content:this.params.cc_content
					});   
					if(res.data.code==200){
						this.$showToast({
							icon:'success',
							title:'发送审批成功',
							duration:1000,
						}).then(async ()=>{
							let update_status=await this.$api.project_api.updateProjectStatus({
								id:this.id,
								status:'1',
								content:'发送给'+this.params.approver.username+'审批'
							})  
							if(update_status.data.code==200){								
								this.$store.commit('PROJECT_LIST_UPDATE',1);
							}
							
							setTimeout(()=>{
								if(this.scene==1){
									uni.navigateBack({
										delta:1
									})
								}else{
									uni.reLaunch({
										url: '/pages/project/project'
									}) 
								}
								
							},1000)
						})
						this.isStop=true;
					}else{
						this.isStop=true;
						this.$showToast({
							icon:'error',
							title:res.data.msg,
							duration:1000,
						})
					} 									
					
					
					 
				}  
			},
			
			// 删除选中人
			deluser(type,idx){
				if(type==1){
					this.params.approver={};
					this.params.approver_id='';					
				}
				
				if(type==2){
					this.params.carbon_copys.splice(idx,1);
					this.params.carbon_copy_id.splice(idx,1);
				}
			},
			
			// 项目详情
			async getProjectDetail() {
				let res = await this.$api.user_api.projectInfo({
					id: this.id
				})   
				if (res.data.code == 200) { 
					this.loadingState.default=false;
					this.project = res.data.data; 
					if(this.params.status==7){
						this.params.title='《'+this.project.project_name+'》项目已修改';
						this.params.content='【'+this.project.user_name+'】根据审批驳回意见修改了《'+this.project.project_name+'》项目，请您尽快完成审批！'; 
						this.params.cc_title='关于《'+this.project.project_name+'》项目修改的消息';
						this.params.cc_content='【'+this.project.user_name+'】修改了《'+this.project.project_name+'》项目，请知悉！';
					}else{
						this.params.title='《'+this.project.project_name+'》项目审批';
						this.params.content='【'+this.project.user_name+'】创建了《'+this.project.project_name+'》项目，请您尽快完成审批！'; 
						this.params.cc_title='关于《'+this.project.project_name+'》项目创建的消息';
						this.params.cc_content='【'+this.project.user_name+'】创建了《'+this.project.project_name+'》项目，请知悉！';
					}
					
				} 
			}, 
			
			
		},
		
		computed: {
			// 审批人
			sp_user() {
				return this.$store.getters.getSpUserState;
			},
		
			// 抄送人
			cs_user() {
				return this.$store.getters.getCsUserState;
			},
		},
		watch: { 
		
			// 监听审批人
			sp_user(newer, older) {					
				if (newer.id) {
					this.params.approver = newer;
					this.params.approver_id = newer.id;  
				}  
			},
		
			// 监听抄送人
			cs_user(newer, older) { 
				if (newer.length > 0) {
					let new_data = [];
					this.params.carbon_copys = newer;
					this.params.carbon_copys.forEach(item => {
						new_data.push(item.id)
					})
					this.params.carbon_copy_id = new_data;
				} else {
					this.params.carbon_copys = [];
					this.params.carbon_copy_id = [];
				} 
			}
		},
	}
</script>

<style lang="less" scoped>
	.upload-area{
		padding: 20rpx;
		background: #fff;
		.icon{
			margin-bottom: 40rpx;
			text-align: center;
			font-size: 160rpx;
			color:#0099ff;
		}
		.btn{
			width: 50%;
			height: 70rpx;
			line-height: 70rpx;
			margin: 0 auto;
			background: #09f;
			border-radius: 8rpx;
			color:#fff;
			font-size: 30rpx;
			text-align: center;
			
		}
	}
	.hd-title{
		display: flex;
		justify-content: space-between;
		margin:0 20rpx 20rpx;		
		.title{
			padding-left:20rpx;
			border-left: 8rpx solid #0099ff;
			font-size: 30rpx;
			font-weight: bold;
		}
		
	}
	.flow-wrap{
		padding:30rpx 0;
		background: #fff;
	}
	.flow-wrap .item{
		display: flex;
		padding:0 20rpx; 
	}
	.flow-wrap .item .left-line{
		width: 30rpx;
		margin: 10rpx 20rpx 0 0;
	}
	.flow-wrap .item .left-line .circle{
		width: 19rpx;
		height: 19rpx;
		background: #ccc;
		border-radius: 50%;
	}
	.flow-wrap .item .left-line .line{ 
		height:150rpx;
		margin: 9rpx 0 0 9rpx;
		border-left: 1rpx solid #ccc;
		flex-shrink: 0;
	}
	.flow-wrap .item .right{
		flex-grow: 2;
		display: flex;
		justify-content: space-between; 
	}
	.flow-wrap .item .right .label{
		font-size: 32rpx;
		width: 120rpx;
	}
	.flow-wrap .item .right .mail-user{
		display: flex; 
		justify-content: flex-end;
		flex-grow: 2;
	}
	.flow-wrap .item .right .mail-user .add{
		margin: 12rpx 20rpx;
		font-size: 32rpx;
	}
	.flow-wrap .item .right .user-item{
		text-align: center;
		font-size: 28rpx;
	}
	.flow-wrap .item .right .mail-user .add-user-btn{
		width:70rpx;
		margin-left: 20rpx;
	}
	.flow-wrap .item .right .mail-user .add-user-btn image{
		width: 100%;
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		right:20rpx;
		bottom:150rpx;
		width: 100rpx;
		height:100rpx;
		text-align: center; 
		background: #09f;
		box-shadow: 0 0 10rpx #09f;
		border-radius: 50%;
		color:#fff;
		font-size: 28rpx;
		.text{
			width: 70rpx;
		}
	}
	.step-name{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.name{
			padding:20rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
		.del{
			margin-right: 20rpx;
			color:#09f;
			font-size: 28rpx;
		}
		
	}
	.created-btn-wrap{
		display: flex;
		.btn{
			height: 80rpx;
			line-height: 80rpx;
			margin: 10rpx 10rpx 0;
			flex-grow: 1;
			border-radius: 8rpx;
			text-align: center;
			font-size: 30rpx;
			color:#fff;
		}
		.next-btn{
			background: #ff9600; 
		}
		.submit-btn{
			background: #0099ff; 
		}
	} 
	.step-bar{
		height: 90rpx;
		margin-bottom: 20rpx;
		.fix-wrap{
			display: flex;
			height: 90rpx;
			background: #fff;
		}
		.item{
			flex-grow: 1;
			width: 25%;
			text-align: center;
			color:#999;
			.text{
				font-size: 28rpx;				
			}
			.icon{
				width: 40rpx;
				height: 40rpx;
				margin:0 auto 0; 
			}
		}
		.active{
			.text,.icon{
				color:#09f;				
			} 
		}
	}
</style>
